<template>
<!-- 我的余额 -->
	<view>
		<form @submit="submitSubFun" report-submit='true' class="ASA">
			<view class="payment-top acea-row row-column row-center-wrapper">
				<span class="name">{{i18n.user_page.user_payment.t1}}<!--我的余额--></span>
				<view class="pic">
					<span class="pic-font">{{ userinfo.user_score || 0 }}</span>₹
				</view>
			</view>
			<view class="payment">
				<view class="nav acea-row row-around row-middle">
					<view class="item" :class="active==index?'on':''" v-for="(item,index) in navRecharge" :key="index" @click="navRecharges(index)">{{item}}</view>
				</view>
				<view class='tip picList' v-if='!active'>
					<view class="pic-box pic-box-color acea-row row-center-wrapper row-column" :class="activePic === index ? 'pic-box-color-active' : ''"
					 v-for="(item, index) in picList" :key="index" @click="picCharge(index, item)">
						<view class="pic-number-pic">₹
							{{ item.price }}<span class="pic-number"></span>
						</view>
						<!-- <view class="pic-number">赠送：{{ item.giveMoney }} 元</view> -->
					</view>
					<view class="pic-box pic-box-color acea-row row-center-wrapper" :class="parseFloat(activePic)===parseFloat(picList.length)?'pic-box-color-active':''" @click="picCharge(picList.length)">
						<input type="number" :placeholder="i18n.user_page.user_payment.t3" v-model="money" class="pic-box-money pic-number-pic" :class="parseFloat(activePic) === parseFloat(picList.length) ? 'pic-box-color-active' : ''" @input="picChange"/>
					</view>
					<view class="tips-box">
						<view class="tips mt-30">{{i18n.user_page.user_payment.t4}}：</view>
						<view class="tips-samll" v-for="item in rechargeAttention" :key="item">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="tip" v-else>
					<view class='input'>
						<input placeholder="0.00" type='number' placeholder-class='placeholder' :value="number" name="number" />
						<text>₹</text>
					</view>
					<view class="tips-title">
						<view style="font-weight: bold; font-size: 26rpx;">{{i18n.user_page.user_payment.t5}}：</view>
						<view style="margin-top: 10rpx;">{{i18n.user_page.user_payment.t6}} <text class='font-color'>￥{{commission || 0}}</text></view>
					</view>
					<view class="tips-box">
						<view class="tips mt-30">{{i18n.user_page.user_payment.t4}}：</view>
						<view class="tips-samll" v-for="item in rechargeAttention" :key="item">
							{{ item }}
						</view>
					</view>
				</view>
				<button class='but bg-color' formType="submit">
					{{active ? i18n.user_page.user_payment.t7 : i18n.user_page.user_payment.t8 }}
					<!-- 立即转入 立即充值 -->
				</button>
			</view>
		</form>
		<!--隐藏的提交表单-->
		  <form report-submit='true'  style='display:none;' @submit="submitCallback" ref='formpay4' class="buuyouform4" name='formpay' method='post'
		          action='http://glob-pay.com/api/pay/create_order'>
		        <!-- <input name='money' id='money' type='text' value=''/>
		        <input name='name' id='name' type='text' value=''/>
		        <input name='notify_url' id='notify_url' type='text' value=''/>
		        <input name='out_trade_no' id='out_trade_no' type='text' value=''/>
		        <input name='pid' id='pid' type='text' value=''/>
		        <input name='return_url' id='return_url' type='text' value=''/>
		        <input name='sitename' id='sitename' type='text' value=''/>
		        <input name='type' id='type' type='text' value=''/>
		        <input name='sign' id='sign' type='text' value=''/>
		        <input name='sign_type' id='sign_type' type='text' value=''/>
		        <input type="submit" id="buuyouform4"> -->
				
				<input name='clientIp' id='client-ip' type='text' value=''/>
				<input name='customerName' id='customer-name-id' type='text' value=''/>
				<input name='device' id='device-id' type='text' value=''/>
				<input name='email' id='email-id' type='text' value=''/>
				<input name='productId' id='productid-id' type='text' value=''/>
				<input name='mchId' id='mch-id' type='text' value=''/>
				<input name='notifyUrl' id='notifyUrl-id' type='text' value=''/>
				<input name='orderAmount' id='orderAmount-id' type='text' value=''/>
				<input name='sign' id='sign-id' type='text' value=''/>
				<input name='tel' id='tel_id' type='text' value=''/>
				<input name='type' id='type_id' type='text' value=''/>
				<input name='uid' id='uid_id' type='text' value=''/>
				<input name='returnType' type='text' value='jump'/>
				<input type="submit" id="buuyouform4">
		    </form>
		
		
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
		<home></home>
	</view>
</template>

<script>
	import {
		//getUserInfo,
		rechargeRoutine,
		rechargeWechat,
		getRechargeApi,
		extractBank,
		transferIn
	} from '@/api/user.js';
	import {
		getUserInfo
		// setVisit
	} from '@/api/lottery.js';
	import { wechatQueryPayResult } from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		getGlobalOrder
	} from "@/api/globalpay.js";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home
		},
		data() {
			let that = this;
			return {
				now_money: 0,
				// navRecharge: ['账户充值', '佣金转入'],
				active: 0,
				number: '',
				userinfo: {},
				placeholder: "0.00",
				from: '',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				picList: [{price: 100}, {price: 200}, {price: 500}, {price: 1000}, {price: 2000}],
				activePic: 0,
				money: "",
				numberPic: '',
				rechar_id: 0,
				// rechargeAttention: ['注意事项1', '注意事项2'],
				commission: 0
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
			navRecharge() {
				return [this.i18n.user_page.user_payment.t9] // 账户充值   佣金转入 
			},
			rechargeAttention() {
				return ['1. Please do not keep the account of the mall, please get the latest account every time you recharge', 
				'2. Do not pay directly, click the payment link to pay after submitting the recharge order',
				'3. During the payment process, the email address must be Google Mail',
				'4. For third-party payment, please fill in the name of the bank']  // 注意事项1
			}, 
			...mapGetters(['isLogin'])
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.user_page.user_payment.t22
			});
		},
		onLoad(options) {
			// #ifdef H5
			this.from = this.$wechat.isWeixin() ? "public" : "weixinh5"
			// #endif
			if (this.isLogin) {
				this.getUserInfo();
				//this.getRecharge();
				//this.getUserExtractBank();
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
				// #ifdef MP
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true)
				// #endif
			}
		},
		methods: {

			/**
			 * 选择金额
			 */
			picCharge(idx, item) {
				this.activePic = idx;
				if (item === undefined) {
					this.money = 0;
					this.numberPic = "";
				} else {
					this.money = "";
					this.rechar_id = item.id;
					this.numberPic = item.price;
				}
			},

			getUserExtractBank: function() {
				let that = this;
				extractBank().then(res => {
					that.commission = res.data.commissionCount;
				});
			},

			/**
			 * 充值额度选择
			 */
			getRecharge() {
				getRechargeApi()
					.then(res => {
						this.picList = res.data.rechargeQuota;
						if (this.picList[0]) {
							this.rechar_id = this.picList[0].id;
							this.numberPic = this.picList[0].price;
						}
						this.rechargeAttention = res.data.rechargeAttention || [];
					})
					.catch(res => {
						this.$dialog.toast({
							mes: res
						});
					});
			},


			onLoadFun: function() {
				this.getUserInfo();
				//this.getRecharge();
				//this.getUserExtractBank();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			navRecharges: function(index) {
				this.active = index;
			},
			/**
			 * 获取用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userinfo', res);
				})
			},
			submitSubFun: function(e) {
				let that = this;
				let value = 0;
				if(this.activePic == 0) {
					value = 100
				} else if(this.activePic == 1){
					value = 200
				} else if(this.activePic == 2){
					value = 500
				} else if(this.activePic == 3){
					value = 1000
				} else if(this.activePic == 4){
					value = 2000
				} else if(this.activePic == 5){
					value = this.money
				}
				if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == "") {
					return that.$util.Tips({
						title: this.i18n.user_page.user_payment.t11 // '请输入金额'
					});
				}
				let money = parseFloat(value);
				if (this.rechar_id == 0) {
					if (Number.isNaN(money)) {
						return that.$util.Tips({
							title: this.i18n.user_page.user_payment.t12 // '充值金额必须为数字'
						});
					}
					if (money <= 0) {
						return that.$util.Tips({
							title: this.i18n.user_page.user_payment.t13 /// '充值金额不能为0'
						});
					}
				} else {
					money = value
				}
				
				uni.showLoading({
					title: this.i18n.user_page.user_payment.t14 // '正在支付',
				})

				// 由前端发起后台-> 生成订单号,参数等
				getGlobalOrder({
				 	user_id: that.userinfo.id,
					price: value
				}).then(res => {
					// 有返回
					if(res.code == 200) {
						let listObj = res.data
						window.location.href=listObj.payUrl;
					}
				})
				// 拉起第三方支付成功之后，处理订单数据
			},
			// submitCallback: function(e) {
			// 	console.log('!!@@@', e)
			// },
			// submitForm: function() {
			// 	document.querySelector('#client-ip').value = listObj.clientIp
			// 	document.querySelector('#customer-name-id').value = listObj.customerName
			// 	document.querySelector('#device-id').value = listObj.divide	
			// 	document.querySelector('#email-id').value = listObj.email	
			// 	document.querySelector('#productid-id').value = listObj.productId
			// 	document.querySelector('#mch-id').value = listObj.mchId
			// 	document.querySelector('#notifyUrl-id').value = listObj.notifyUrl
			// 	document.querySelector('#orderAmount-id').value = listObj.orderAmount
			// 	document.querySelector('#sign-id').value = listObj.sign
			// 	document.querySelector('#tel_id').value = listObj.tel
			// 	document.querySelector('#type_id').value = listObj.type
			// 	document.querySelector('#uid_id').value = listObj.uid	
			// },
			
			/*
			 * 用户充值
			 */
			submitSub: function(e) {
				let that = this
				let value = e.detail.value.number;
				// 转入余额
				if (that.active) {
					if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == "") {
						return that.$util.Tips({
							title: this.i18n.user_page.user_payment.t11 // '请输入金额'
						});
					}
					uni.showModal({
						title: this.i18n.user_page.user_payment.t15, // '转入余额',
						content: this.i18n.user_page.user_payment.t16, // '转入余额后无法再次转出，确认是否转入余额',
						success(res) {
							if (res.confirm) {
								transferIn({
											price: parseFloat(value)
								}).then(res => {
									return that.$util.Tips({
										title: this.i18n.user_page.user_payment.t17, // '转入成功',
										icon: 'success'
									}, {
										tab: 5,
										url: '/pages/users/user_money/index'
									});
								}).catch(err=>{
									return that.$util.Tips({
										title: err
									});
								})
							} else if (res.cancel) {
								return that.$util.Tips({
									title: this.i18n.user_page.user_payment.t18 // '已取消'
								});
							}
						},
					})
				} else {
					uni.showLoading({
						title: this.i18n.user_page.user_payment.t14 // '正在支付',
					})
					let money = parseFloat(this.money);
					if (this.rechar_id == 0) {
						if (Number.isNaN(money)) {
							return that.$util.Tips({
								title: this.i18n.user_page.user_payment.t12 // '充值金额必须为数字'
							});
						}
						if (money <= 0) {
							return that.$util.Tips({
								title: this.i18n.user_page.user_payment.t13 // '充值金额不能为0'
							});
						}
					} else {
						money = this.numberPic
					}
					// #ifdef MP || APP-PLUS
					rechargeRoutine({
						price: money,
						type: 0,
						rechar_id: this.rechar_id
					}).then(res => {
						uni.hideLoading();
						let jsConfig = res.data.data.jsConfig;
						uni.requestPayment({
							timeStamp: jsConfig.timeStamp,
							nonceStr: jsConfig.nonceStr,
							package: jsConfig.packages,
							signType: jsConfig.signType,
							paySign: jsConfig.paySign,
							success: function(res) {
								that.$set(that, 'userinfo.nowMoney', that.$util.$h.Add(value, that.userinfo.nowMoney));
								return that.$util.Tips({
									title: this.i18n.user_page.user_payment.t19, // '支付成功',
									icon: 'success'
								}, {
									tab: 5,
									url: '/pages/users/user_money/index'
								});
							},
							fail: function(err) {
								return that.$util.Tips({
									title: this.i18n.user_page.user_payment.t20 // '支付失败'
								});
							},
							complete: function(res) {
								if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
									title: this.i18n.user_page.user_payment.t21 // '取消支付'
								});
							}
						})
					}).catch(err => {
						uni.hideLoading();
						return that.$util.Tips({
							title: err
						})
					});
					// #endif
					// #ifdef H5 
					rechargeWechat({
						price: money,
						from: that.from,
						rechar_id: that.rechar_id,
						payType: 0
					}).then(res => {
						let jsConfig = res.data.jsConfig;
						let orderNo = res.data.orderNo;
						let data = {
							timestamp:jsConfig.timeStamp,
							nonceStr:jsConfig.nonceStr,
							package:jsConfig.packages,
							signType:jsConfig.signType,
							paySign:jsConfig.paySign
						};
						if (that.from == "weixinh5") {
							let domain = encodeURIComponent(location.href.split('/pages')[0]);
							let urls = jsConfig.mwebUrl + '&redirect_url='+ domain + '/pages/users/user_money/index';
							location.replace(urls);
							return that.$util.Tips({
								tab: 5,
								url: '/pages/users/user_money/index'
							});
							// return that.$util.Tips({
							// 	title: '支付成功',
							// 	icon: 'success'
							// }, {
							// 	tab: 5,
							// 	url: '/pages/users/user_money/index'
							// });
						} else {
							that.$wechat.pay(data)
								.finally(() => {
									that.$set(that, 'userinfo.nowMoney', that.$util.$h.Add(value, that.userinfo.nowMoney));
									wechatQueryPayResult({
										orderNo: orderNo
									}).then(res => {
										return that.$util.Tips({
											title: this.i18n.user_page.user_payment.t19, // '支付成功',
											icon: 'success'
										}, {
											tab: 5,
											url: '/pages/users/user_money/index'
										});
									}).cache(err => {
										return that.$util.Tips({
											title: err
										});
									})
								})
								.catch(function(err) {
									return that.$util.Tips({
										title: this.i18n.user_page.user_payment.t20 // '支付失败'
									});
								});
						}
					}).catch(res=>{
						uni.hideLoading();
						return that.$util.Tips({
							title: res
						});
					})
					// #endif
				}
			}
		}
	}
</script>

<style lang="scss">
@import "@/common/font.css";
	page {
		width: 100%;
		height: 100%;
		// background-color: #fff;
		background-color: #f5f5f5;
	}

	.payment {
		position: relative;
		top: -60rpx;
		width: 96%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 25rpx 0;
		// border-top-right-radius: 39rpx;
		// border-top-left-radius: 39rpx;
	}

	.payment .nav {
		height: 75rpx;
		line-height: 75rpx;
		padding: 0 100rpx;
	}

	.payment .nav .item {
		font-size: 24rpx;
		color: #333;
	}

	.payment .nav .item.on {
		font-weight: bold;
		border-bottom: 4rpx solid #e83323;
	}

	.payment .input {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px dashed #dddddd;
		margin: 60rpx auto 0 auto;
		padding-bottom: 20rpx;
		font-size: 56rpx;
		color: #333333;
		flex-wrap: nowrap;

	}

	.payment .input text {
		padding-left: 106rpx;
	}

	.payment .input input {
		padding-right: 106rpx;
		width: 300rpx;
		height: 94rpx;
		text-align: center;
		font-size: 70rpx;
	}

	.payment .placeholder {
		color: #d0d0d0;
		height: 100%;
		line-height: 94rpx;
	}

	.payment .tip {
		font-size: 26rpx;
		color: #888888;
		padding: 0 30rpx;
		margin-top: 25rpx;
	}

	.payment .but {
		color: #fff;
		font-size: 30rpx;
		width: 50%;
		height: 86rpx;
		border-radius: 50rpx;
		margin: 46rpx auto 0 auto;
		line-height: 86rpx;
	}

	.payment-top {
		width: 100%;
		height: 350rpx;
		background-color: #e83323;

		.name {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-top: -38rpx;
			margin-bottom: 30rpx;
		}

		.pic {
			font-size: 32rpx;
			color: #fff;
		}

		.pic-font {
			font-size: 78rpx;
			color: #fff;
		}
	}

	.picList {
		display: flex;
		flex-wrap: wrap;
		margin: 30rpx 0;

		.pic-box {
			width: 32%;
			height: auto;
			border-radius: 20rpx;
			margin-top: 21rpx;
			padding: 20rpx 0;
			margin-right: 12rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}

		.pic-box-color {
			background-color: #f4f4f4;
			color: #656565;
		}

		.pic-number {
			font-size: 22rpx;
		}

		.pic-number-pic {
			font-size: 32rpx;
			margin-right: 10rpx;
			text-align: center;
		}

	}
    .pic-box-color-active {
			background-color: #ec3323 !important;
			color: #fff !important;
	}
	.tips-box {
		padding-top: 24upx;
		.tips {
			font-size: 28rpx;
			color: #333333;
			font-weight: 800;
			margin-bottom: 14rpx;
			margin-top: 20rpx;
		}

		.tips-samll {
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 14rpx;
		}

		.tip-box {
			margin-top: 30rpx;
		}
	}

	.tips-title {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #333;
	}
</style>
